import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Renderer2,
  ElementRef,
  AfterViewInit,
  HostBinding,
  OnDestroy,
} from "@angular/core";
import { cloudfn } from "./cloud";
declare let ParticleEngine: any;
declare let TimelineMax: any;
declare let createjs: any;
declare let d3: any;
declare let Linear: any;
@Component({
  selector: "app-cloudword",
  templateUrl: "./cloudword.component.html",
  styleUrls: ["./cloudword.component.less"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CloudwordComponent implements OnInit, AfterViewInit, OnDestroy {
  @HostBinding("style.fontSize") fontSize = "0";
  words: any[] = "江西水利投资集团,江河信息,数据产品".repeat(4).split(",");
  timer: any;
  constructor(private render: Renderer2, private el: ElementRef) {}
  ngOnInit(): void {}
  ngAfterViewInit(): void {
    this.initCloudWord();
    this.initCanvas();
  }
  initCloudWord() {
    const { el } = this;
    const { clientHeight, clientWidth } = this.render.parentNode(
      this.el.nativeElement
    );
    const layout = cloudfn(clientHeight, clientWidth)
      .size([clientWidth, clientHeight])
      .words(
        this.words.map((d) => ({
          text: d,
          size: 20,
          test: "haha",
        }))
      )
      .padding(20)
      // tslint:disable-next-line: no-bitwise
      .rotate(() => ~~(Math.random() * 2) * 90)
      .font("雅黑")
      .fontSize((d) => d.size)
      .on("end", draw);

    layout.start();
    function draw(words) {
      d3.select("#text_svg")
        .attr("class", "wapper-svg")
        .attr("width", layout.size()[0])
        .attr("height", layout.size()[1])
        .selectAll("g")
        // .attr("opacity", ".1")
        // .attr(
        //   "transform",
        //   "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")"
        // )
        .selectAll("text")
        .data(words)
        .enter()
        .append("text")
        .style("font-size", (d) => d.size + "px")
        .style("font-family", "雅黑")
        .attr("text-anchor", "middle")
        // .attr("fill", "#fff")
        .attr("transform", (d) => "translate(" + [d.x, d.y] + ")")
        .text((d) => d.text);
    }
    d3.select("linearGradient").attr("x2", clientWidth);
    d3.select("rect").attr("witdth", clientWidth);
    d3.select("rect").attr("height", clientHeight);
    const tl = new TimelineMax({
      repeat: -1,
    });
    const gradient = document.getElementById("gradient");
    let gradient_attr = gradient.getAttribute("gradientTransform");
    // 改变渐变transform的rotate属性
    for (let i = 0, l = 360; i <= l; i++) {
      tl.to(gradient, 0.08, {
        attr: {
          gradientTransform: "rotate(" + -i + ")",
        },
        ease: Linear.easeInOut,
      });
    }
    // let number = 0;
    // this.timer = setInterval(() => {
    //   d3.select("linearGradient").attr(
    //     "gradientTransform",
    //     "rotate(" + number + ")"
    //   );
    //   number += 1;
    //   number = number >= 360 ? 0 : number;
    // }, 30);
  }
  initCanvas() {
    const particles = new ParticleEngine("projector");
    createjs.Ticker.addEventListener("tick", updateCanvas);
    window.addEventListener("resize", resizeCanvas, false);
    function updateCanvas() {
      particles.render();
    }
    function resizeCanvas() {
      particles.resize();
    }
  }
  ngOnDestroy(): void {}
}
